
<div class="navbar">
  <div class="navbar-inner">
    <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
    <div class="center sliding">Swiper Slider</div>
    <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
  </div>
</div>
<div class="pages navbar-through">
  <div data-page="swiper" class="page">
    <div class="page-content">
      <div class="content-block">
        <p>Framework7 comes with powerful and most modern touch slider ever - <a href="http://idangero.us/swiper" class="external" target="_blank">Swiper Slider</a> with super flexible configuration and lot, lot of features. Just check the following demos:</p>
      </div>
      <div class="content-block-title">Swiper Examples</div>
      <div class="list-block">
        <ul>
          <li><a href="swiper-horizontal.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Swiper Horizontal</div>
              </div></a></li>
          <li><a href="swiper-vertical.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Swiper Vertical</div>
              </div></a></li>
          <li><a href="swiper-space-between.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Space Between Slides</div>
              </div></a></li>
          <li><a href="swiper-multiple.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Multiple Per Page</div>
              </div></a></li>
          <li><a href="swiper-nested.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Nested Swipers</div>
              </div></a></li>
          <li><a href="swiper-loop.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Infinite Loop Mode</div>
              </div></a></li>
          <li><a href="swiper-3d-cube.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">3D Cube Effect</div>
              </div></a></li>
          <li><a href="swiper-3d-coverflow.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">3D Coverflow Effect</div>
              </div></a></li>
          <li><a href="swiper-3d-flip.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">3D Flip Effect</div>
              </div></a></li>
          <li><a href="swiper-fade.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Fade Effect</div>
              </div></a></li>
          <li><a href="swiper-scrollbar.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">With Scrollbar</div>
              </div></a></li>
          <li><a href="swiper-gallery.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Two Way Control Gallery</div>
              </div></a></li>
          <li><a href="swiper-custom.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Custom Controls</div>
              </div></a></li>
          <li><a href="swiper-parallax.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Parallax</div>
              </div></a></li>
          <li><a href="swiper-lazy.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Lazy Loading</div>
              </div></a></li>
          <li><a href="swiper-pagination-progress.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Progress Pagination</div>
              </div></a></li>
          <li><a href="swiper-pagination-fraction.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Fraction Pagination</div>
              </div></a></li>
          <li><a href="swiper-zoom.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Zoom</div>
              </div></a></li>
        </ul>
      </div>
    </div>
  </div>
</div>